<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>轮播图管理</title>
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="/back/css/reset.css" type="text/css" media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="/back/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/back/css/invalid.css" type="text/css" media="screen" />

    <!-- jQuery -->
    <script type="text/javascript" src="/back/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript" src="/back/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>

    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="/back/widget/webuploader/webuploader.css">
    <script type="text/javascript" src="/back/widget/webuploader/webuploader.min.js"></script>
    <script type="text/javascript" src="/commons/js/myupload.js"></script>

    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>

    <style>
        /* 现代化样式 */
        .carousel-manager-container {
            padding: 20px;
            background: #f5f7fa;
            min-height: 100vh;
        }

        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .page-header h1 {
            color: white;
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 10px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .page-header p {
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            font-size: 14px;
        }

        .toolbar {
            background: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn-add {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
        }

        .btn-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-add:active {
            transform: translateY(0);
        }

        .carousel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .carousel-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            position: relative;
        }

        .carousel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
        }

        .carousel-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: #f0f0f0;
        }

        .carousel-card-body {
            padding: 20px;
        }

        .carousel-title {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin: 0 0 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .carousel-link {
            font-size: 13px;
            color: #718096;
            margin: 0 0 15px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .carousel-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e2e8f0;
        }

        .meta-item {
            display: flex;
            flex-direction: column;
        }

        .meta-label {
            font-size: 11px;
            color: #a0aec0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .meta-value {
            font-size: 14px;
            font-weight: 600;
            color: #2d3748;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-active {
            background: #c6f6d5;
            color: #22543d;
        }

        .status-inactive {
            background: #fed7d7;
            color: #742a2a;
        }

        .carousel-actions {
            display: flex;
            gap: 8px;
        }

        .btn-action {
            flex: 1;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-toggle {
            background: #edf2f7;
            color: #4a5568;
        }

        .btn-toggle:hover {
            background: #e2e8f0;
        }

        .btn-edit {
            background: #bee3f8;
            color: #2c5282;
        }

        .btn-edit:hover {
            background: #90cdf4;
        }

        .btn-delete {
            background: #fed7d7;
            color: #c53030;
        }

        .btn-delete:hover {
            background: #fc8181;
            color: white;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .empty-state-icon {
            font-size: 64px;
            color: #cbd5e0;
            margin-bottom: 20px;
        }

        .empty-state-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
        }

        .empty-state-text {
            font-size: 14px;
            color: #718096;
            margin-bottom: 20px;
        }

        /* 弹窗样式优化 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .form-select:focus {
            outline: none;
            border-color: #667eea;
        }

        .upload-area {
            border: 2px dashed #cbd5e0;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background: #f7fafc;
            transition: all 0.2s ease;
        }

        .upload-area:hover {
            border-color: #667eea;
            background: #edf2f7;
        }

        #upload_list img {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
            background: #edf2f7;
            color: #4a5568;
            border: none;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-secondary:hover {
            background: #e2e8f0;
        }

        .card-id {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }
    </style>

    <script th:inline="javascript">
        $(function () {
            //查询轮播图列表
            queryCarouselList();

            //初始化上传插件
            uploadInit((respData, file) => {
                $("#imagePath").val(respData);
                $("#upload_list").html("<img src='/api/file/get?filename=" + respData + "' style='max-width: 200px; max-height: 150px;'/>");
            });
        });

        /**
         * 查询轮播图列表
         */
        function queryCarouselList(){
            myajax({
                url: '/api/carousel/list',
                data: {},
                success: function (data) {
                    const container = $("#carouselGrid");

                    // 更新统计数量
                    $("#totalCount").text(data.length);

                    if (data.length === 0) {
                        // 显示空状态
                        container.html(`
                            <div class="empty-state" style="grid-column: 1 / -1;">
                                <div class="empty-state-icon">📷</div>
                                <h3 class="empty-state-title">暂无轮播图</h3>
                                <p class="empty-state-text">点击上方"新增轮播图"按钮开始添加</p>
                            </div>
                        `);
                        return;
                    }

                    var cards = "";
                    data.forEach(function (item, index) {
                        const statusClass = item.status ? 'status-active' : 'status-inactive';
                        const statusText = item.status ? '启用' : '禁用';
                        const toggleText = item.status ? '禁用' : '启用';
                        const toggleValue = !item.status;

                        cards += `
                            <div class="carousel-card">
                                <div class="card-id">#${item.id}</div>
                                <img class="carousel-image" src="/api/file/get?filename=${item.imagePath}" alt="${item.title || ''}">
                                <div class="carousel-card-body">
                                    <h3 class="carousel-title">${item.title || '无标题'}</h3>
                                    <p class="carousel-link">${item.linkUrl || '无链接'}</p>
                                    <div class="carousel-meta">
                                        <div class="meta-item">
                                            <span class="meta-label">排序</span>
                                            <span class="meta-value">${item.sortOrder}</span>
                                        </div>
                                        <div class="meta-item">
                                            <span class="meta-label">状态</span>
                                            <span class="status-badge ${statusClass}">${statusText}</span>
                                        </div>
                                    </div>
                                    <div class="carousel-actions">
                                        <button class="btn-action btn-toggle" onclick="updateStatus(${item.id}, ${toggleValue})">${toggleText}</button>
                                        <button class="btn-action btn-edit" onclick="editCarousel(${item.id})">编辑</button>
                                        <button class="btn-action btn-delete" onclick="deleteCarousel(${item.id})">删除</button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    container.html(cards);
                }
            });
        }

        /**
         * 更新状态
         */
        function updateStatus(id, status) {
            const action = status ? '启用' : '禁用';
            if (confirm('确定要' + action + '该轮播图吗？')) {
                $.ajax({
                    url: '/api/carousel/updateStatus',
                    type: 'POST',
                    data: {
                        id: id,
                        status: status
                    },
                    success: function(response) {
                        if (response.code === 200) {
                            alert('✅ ' + action + '成功！');
                            queryCarouselList();
                        } else {
                            alert('❌ 操作失败: ' + (response.message || '未知错误'));
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('状态更新失败详情:', xhr, status, error);
                        alert('❌ 操作失败: ' + (xhr.responseJSON?.message || error || '网络错误'));
                    }
                });
            }
        }

        /**
         * 编辑轮播图
         */
        function editCarousel(id) {
            myajax({
                url: '/api/carousel/getById',
                data: {id: id},
                success: function(data) {
                    $("#carouselId").val(data.id);
                    $("#imagePath").val(data.imagePath);
                    $("#title").val(data.title);
                    $("#linkUrl").val(data.linkUrl);
                    $("#sortOrder").val(data.sortOrder);
                    $("#status").val(data.status ? "1" : "0");
                    
                    if (data.imagePath) {
                        $("#upload_list").html("<img src='/api/file/get?filename=" + data.imagePath + "' style='max-width: 200px; max-height: 150px;'/>");
                    }

                    showDialog();
                }
            });
        }

        /**
         * 打开弹窗
         */
        function showDialog() {
            openDialog('myform', '✨ 轮播图管理', 650, 600);
        }

        /**
         * 打开弹窗的回调
         */
        function callback(){
            $('.webuploader-container div[id]').css({
                'width': '100%',
                'height': '100%'
            });
        }

        /**
         * 保存或更新轮播图
         */
        function saveOrUpdate() {
            const id = $("#carouselId").val();
            const url = id ? '/api/carousel/update' : '/api/carousel/save';

            const formData = {
                id: id || undefined,
                imagePath: $("#imagePath").val(),
                title: $("#title").val(),
                linkUrl: $("#linkUrl").val(),
                sortOrder: $("#sortOrder").val(),
                status: $("#status").val() === "1"
            };

            if (!formData.imagePath) {
                alert('⚠️ 请上传轮播图图片！');
                return;
            }

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.code === 200) {
                        alert('✅ 保存成功！');
                        closeDialog('myform');
                        queryCarouselList();
                        resetForm();
                    } else {
                        alert('❌ 保存失败: ' + (response.message || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存失败详情:', xhr, status, error);
                    alert('❌ 保存失败: ' + (xhr.responseJSON?.message || error || '网络错误'));
                }
            });
        }

        /**
         * 删除轮播图
         */
        function deleteCarousel(id) {
            if (confirm('⚠️ 确定要删除该轮播图吗？\n\n删除后将无法恢复！')) {
                $.ajax({
                    url: '/api/carousel/delete',
                    type: 'POST',
                    data: {id: id},
                    success: function(response) {
                        if (response.code === 200) {
                            alert('✅ 删除成功！');
                            queryCarouselList();
                        } else {
                            alert('❌ 删除失败: ' + (response.message || '未知错误'));
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('删除失败详情:', xhr, status, error);
                        alert('❌ 删除失败: ' + (xhr.responseJSON?.message || error || '网络错误'));
                    }
                });
            }
        }

        /**
         * 重置表单
         */
        function resetForm() {
            $("#carouselId").val('');
            $("#imagePath").val('');
            $("#title").val('');
            $("#linkUrl").val('');
            $("#sortOrder").val('0');
            $("#status").val('1');
            $("#upload_list").html('');
        }
    </script>
</head>
<body>
<div class="carousel-manager-container">
    <!-- 页面头部 -->
    <div class="page-header">
        <h1>🎨 轮播图管理</h1>
        <p>管理首页轮播图，支持上传、编辑、排序和状态控制</p>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
        <div>
            <span style="color: #718096; font-size: 14px;">共 <span id="totalCount" style="color: #667eea; font-weight: 600;">0</span> 张轮播图</span>
        </div>
        <button class="btn-add" onclick="showDialog(); resetForm();">
            ➕ 新增轮播图
        </button>
    </div>

    <!-- 轮播图网格 -->
    <div class="carousel-grid" id="carouselGrid">
        <!-- 卡片将通过JavaScript动态生成 -->
    </div>
</div>

<!-- 轮播图表单 -->
<div id="myform" style="display: none;">
    <form>
        <input type="hidden" id="carouselId"/>
        <input type="hidden" id="imagePath"/>

        <div class="form-group">
            <label class="form-label">轮播图图片 *</label>
            <div class="upload-area">
                <a id="picker" class="btn-primary" style="display: inline-block; text-decoration: none;">📁 选择图片</a>
                <p style="margin: 10px 0 0 0; font-size: 12px; color: #a0aec0;">建议尺寸：1920x700，支持JPG、PNG格式</p>
            </div>
            <div id="upload_list" style="margin-top: 15px; text-align: center;"></div>
        </div>

        <div class="form-group">
            <label class="form-label">轮播图标题</label>
            <input class="form-input" type="text" id="title" placeholder="请输入轮播图标题"/>
        </div>

        <div class="form-group">
            <label class="form-label">跳转链接</label>
            <input class="form-input" type="text" id="linkUrl" placeholder="请输入点击跳转的链接（可选）"/>
        </div>

        <div class="form-group">
            <label class="form-label">排序顺序</label>
            <input class="form-input" type="number" id="sortOrder" value="0" placeholder="数字越小越靠前"/>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: #a0aec0;">数字越小，轮播图显示越靠前</p>
        </div>

        <div class="form-group">
            <label class="form-label">状态</label>
            <select class="form-select" id="status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>

        <div class="form-actions">
            <button type="button" class="btn-secondary" onclick="closeDialog('myform'); resetForm();">取消</button>
            <button type="button" class="btn-primary" onclick="saveOrUpdate();">💾 保存</button>
        </div>
    </form>
</div>
</body>
</html>

